<style>
@media print {
  ._wz_sendNoticeSee {
    -webkit-print-color-adjust: exact;
    height: inherit !important;
    font-size: 12px !important;
  }
}
</style>
<template>
  <div class="_wz_sendNoticeSee" ref="sendNoticeSee">
    <Form>
      <table cellpadding="0" cellspacing="0" border="0">
        <colgroup>
          <col width="13%">
          <col>
          <col width="13%">
          <col>
        </colgroup>
        <tbody>
        <tr>
          <td style="font-weight: 600;position:relative;text-align: center;" colspan="4">
            {{ formData.noticeTitle?formData.noticeTitle:'通知标题' }}
            <Button type="primary" @click="printTest" class="no-print" style="position: absolute;right: 10px;top: 8px;">打印</Button>
          </td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">通知等级</td>
          <td>
            <template v-if="!!formData.noticeLv">
              <template v-if="formData.noticeLv == 1">普通</template>
              <template v-if="formData.noticeLv == 2">重要</template>
              <template v-if="formData.noticeLv == 3">紧急</template>
            </template>
          </td>
          <td style="text-align: right;font-weight: 600;">回复状态</td>
          <td>
            <i-switch v-model.number="formData.noticeReplyType" :false-value="0" :true-value="1" disabled>
              <span slot="open">开</span>
              <span slot="close">关</span>
            </i-switch>
          </td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">企业下发人</td>
          <td colspan="3">{{!!formData.deptContact?formData.deptContact:''}}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">运输企业</td>
          <td colspan="3">{{!!formData.deptName?formData.deptName:''}}</td>
        </tr>
        <tr v-if="!!formData.noticeFileUrl">
          <td style="text-align: right;font-weight: 600;">通知附件</td>
          <td colspan="3">已添加通知附件 <Button type="primary" class="no-print" @click="multipartFileFun">查看附件</Button></td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">通知内容</td>
          <td colspan="3" v-html="formData.noticeContent" style="padding: 10px;"></td>
        </tr>


        </tbody>
      </table>
    </Form>
  </div>
</template>
<script>

import wzTbale from "../../../components/table/table";
import reading from './reading.vue'


export default {
  components: {
    wzTbale,//列表
    reading,//阅读情况
  },
  props: ["selectData"],//接收来自父组件的数据
  data() {
    return {
      subDeptList: [],//运输企业
      formData: {},//新增修改表单数据
    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let that = this;
    that.formData = that.selectData

    //运输企业
    that.axios.post(that.apiUrl.coreDeptCoreDeptList, {}).then(res => {
      if (!!res) {
        that.subDeptList = res.data.data;

      }
    }).catch(err => {
      console.log("失败", err)
    })
  },
  methods: {//执行的方法
    multipartFileFun() {
      window.open(this.apiUrl.imgUrl + this.formData.noticeFileUrl)
    },
    printTest() {
      this.$print(this.$refs.sendNoticeSee) // 使用
    }

  },
  watch: {//监听
  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_sendNoticeSee {

  height: 100%;
  overflow: auto;

  table {
    table-layout:fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px !important;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border: 1px solid #515a6e;
      padding: 0 10px;
      word-break: break-word;
    }
  }

  .demo-upload-list {
    margin: 5px auto;
    width: 200px;
    height: 140px;
    text-align: center;
    line-height: 140px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;

    img {
      min-height: 30%;
      max-height: 90%;
      min-width: 30%;
      max-width: 90%;
      //width: 100%;
      //height: 100%;
    }
  }
}
</style>
